<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .btn-group {
            position: fixed;
            top: 0;
            left: 0;
            background-color: lightblue;
            height: 30px;
            width: 100%;
            text-align: center;
        }

        .description {
            height: 300px;
            border: 1px solid #f2f2f2;
            width: 60%;
            margin: 0 auto;
        }

        .description_title {
            height: 40px;
            line-height: 40px;
            background-color: #f9f9f9;
            border: 1px solid #e8e8e8;
            border-left: 4px solid #59aaa0;
            padding-left: 20px;
            color: #59aaa0;
            font-size: 14px;
            font-weight: bold;
        }
        .placeholder {
            width: 100%;
            height: 300px;
            background-color: lightgoldenrodyellow;
            text-align: center;
            padding-top: 50px
        }
    </style>
</head>

<body>
    <div class="btn-group">
        <button id="btn1">描述</button>
        <button id="btn2">不可描述</button>
        <button id="btn3">描述吗</button>
    </div>
    <div class="placeholder">
        <h2>我是占位符</h2>
    </div>
    <div class="description desc1">
        <div class="description_title">描述</div>
        <div class="content">
            <div>
                <p>广西北海市北海大道东沿线368号中国电子北海产业园</p>
                <p>广西北海市北海大道东沿线368号中国电子北海产业园</p>
                <p>广西北海市北海大道东沿线368号中国电子北海产业园</p>
                <p>广西北海市北海大道东沿线368号中国电子北海产业园</p>
            </div>
        </div>
    </div>
    <div class="description desc2">
        <div class="description_title">不可描述</div>
        <div>
            <p>办公空间面积149500平方米</p>
            <p>办公空间面积149500平方米</p>
            <p>办公空间面积149500平方米</p>
            <p>办公空间面积149500平方米</p>
        </div>
    </div>
    <div class="description desc3">
        <div class="description_title">描述吗</div>
        <div>
            <p>7*24小时保安</p>
            <p>7*24小时保安</p>
            <p>7*24小时保安</p>
            <p>7*24小时保安</p>
        </div>
    </div>
    <div class="placeholder">
        <h2>我是占位符</h2>
    </div>
    <div class="placeholder">
        <h2>我是占位符</h2>
    </div>


    <script>
        var btn1 = document.getElementById("btn1")
        var btn2 = document.getElementById("btn2")
        var btn3 = document.getElementById("btn3")

        var desc1 = document.getElementsByClassName("desc1")[0]
        var desc2 = document.getElementsByClassName("desc2")[0]
        var desc3 = document.getElementsByClassName("desc3")[0]

        var body = document.body;
        var btnHeight = document.getElementsByClassName("btn-group")[0].offsetHeight;
        function scrollToTarget(btnDOM, targetDOM) {
            btnDOM.addEventListener("click", function () {
                var self = this;
                var top = targetDOM.offsetTop;
                body.scrollTop = top - btnHeight;
            })
        }

        scrollToTarget(btn1, desc1)
        scrollToTarget(btn2, desc2)
        scrollToTarget(btn3, desc3)
    </script>
</body>

</html>